<template>
  <el-container>
    <el-header style="height:80px;">
      <el-form
        ref="form"
        label-width="80px"
        style="margin-top:20px;"
      >
        <el-row align="center">
          <el-col :span="8">
            <el-form-item label="部门名称：">
              <el-input v-model="search.name">请输入部门名称</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label-width="0">
              <el-button
                class="querybtn"
                type="primary"
                @click="findSupervise(search.name,10,0)"
                style="color: #606266;background-color: #fff;border-color: #dcdfe6;margin-left:10px;"
              >查询</el-button>
              <!-- <el-button
                type="primary"
                @click="handleExport"
              >导出</el-button>-->
              <el-button
                type="primary"
                @click="viewTableList"
              >查看督查表</el-button>
              <el-button
                type="warning"
                @click="setSuperviseForm"
              >设置督查表</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main style="height:800px;">
      <section class="contant_head">
        <span>图表
          <!-- <sub>Form</sub> -->
        </span>
      </section>
      <el-table
        :data="superviseList"
        border
        stripe
        style="text-align:center;"
        @cell-click="cellClick"
        :header-cell-style="getRowClass"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        id="out-table"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
          align="center"
        > </el-table-column>-->
        <el-table-column
          type="index"
          label="编号"
          width="90"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="section"
          label="部门名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nodone"
          label="未完成"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="done"
          label="已完成"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="novia"
          label="未通过"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tote"
          label="总数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="grade"
          label="督查评分"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          :page-size="limit"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,20]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          style="float:right"
        ></el-pagination>
      </div>
    </el-main>
    <el-dialog
      title="设置督查表"
      :visible.sync="dialogSuperviseVisible"
    >
      <el-form
        ref="form"
        :model="superviseForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="100px"
        style="margin-left:20px"
      >
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item
              label="督查表名称："
              prop="name"
              :rules="{required:true,message:'请输入督查表名称',trigger:'change'}"
            >
              <el-input
                v-model="superviseForm.name"
                placeholder="请输入督查表名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item
              label="截止日期："
              prop="startTime"
              :rules="{required:true,message:'请选择日期',trigger:'change'}"
            >
              <el-date-picker
                v-model="superviseForm.startTime"
                type="date"
                placeholder="截止时间"
                style="width:100%"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOption"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item
              label="发送对象："
              prop="objectId"
              :rules="[{required: true, message: '请选择发送对象', trigger: 'change' }]"
            >
              <!-- <el-select
                v-model="selectedType"
                placeholder="请选择发送对象类型"
                style="width:100%"
                @change="onTypeChange"
              >
                <el-option
                  v-for="item in sendObject"
                  :key="item.label"
                  :label="objectTypes[item.label]"
                  :value="item.label"
                ></el-option>
              </el-select> -->
              <el-select
                v-model="superviseForm.objectId"
                multiple
                placeholder="请选择发送对象"
                filterable
                style="width:100%;margin-top: 20px;"
              >
                <el-option
                  v-for="item in alldeparts"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item
              label=" "
              prop="fourItems"
              :rules="[{required:true,message:'请添加内容',trigger:'change'}]"
            >
              <el-select
                v-model="newlyValue"
                placeholder="新增检查内容"
              >
                <el-option
                  v-for="item in addOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button
                type="primary"
                @click="addNewValue"
                :disabled="!newlyValue"
              >新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-for="(item,index) in newlyValueConfig"
          :key="index"
          class="newly-add"
        >
          <!-- <el-col style="width: 100px ; height: 44px;">
            <div
              v-if="item.type===3"
              style="line-height: 44px;"
            >
              <el-radio
                v-model="item.state"
                :label="1"
              >是</el-radio>
              <el-radio
                v-model="item.state"
                :label="2"
              >否</el-radio>
            </div>
          </el-col> -->
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item label=" ">
              <el-col :span="20">
                <div
                  v-if="item.type===3"
                  class="image-border-wrap"
                >
                  <i class="el-icon-plus"></i>
                </div>
              </el-col>
              <el-col
                v-if="item.type===2"
                :span="20"
              >
                <el-form-item
                  label-width="0"
                  :prop="'fourItems.'+index+'.name'"
                  :rules="{required: true, message:'请填写此项', trigger: 'blur'}"
                >
                  <el-input
                    placeholder="文本框"
                    v-model="newlyValueConfig[index].name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                v-if="item.type===1"
                :span="20"
              >
                <el-row>
                  <el-form-item
                    label-width="0"
                    :prop="'fourItems.'+index+'.name'"
                    :rules="{required: true, message:'请填写此项', trigger: 'blur'}"
                  >
                    <el-input
                      placeholder="文本框"
                      v-model="newlyValueConfig[index].name"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-radio
                    v-model="newlyValueConfig[index].value"
                    label="a"
                    disabled
                  >A</el-radio>
                  <el-radio
                    v-model="newlyValueConfig[index].value"
                    label="b"
                  >B</el-radio>
                  <el-radio
                    v-model="newlyValueConfig[index].value"
                    label="c"
                  >C</el-radio>
                  <el-radio
                    v-model="newlyValueConfig[index].value"
                    label="d"
                  >D</el-radio>
                </el-row>
              </el-col>
              <el-col
                :span="2"
                :offset="1"
              >
                <i
                  class="el-icon-delete"
                  @click="deleteCurrent(index)"
                  style="cursor:pointer;margin-left: 16px"
                  title="移除"
                ></i>
              </el-col>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button @click="dialogSuperviseVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveSuperviseData('form')"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="查看督查表"
      :visible.sync="dialogContentVisible"
    >
      <el-form
        ref="form"
        id="nodisable"
        :model="tableContent"
        label-position="left"
        label-width="100px"
        style="margin-left:20px"
      >
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item label="督查表名称：">
              <el-input
                v-model="tableContent.tableName"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item label="截止日期：">
              <el-date-picker
                v-model="tableContent.endTime"
                type="date"
                placeholder="截止时间"
                style="width:100%"
                value-format="yyyy-MM-dd"
                disabled
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item label="发送部门：">
              <el-select
                v-model="tableContent.objects"
                multiple
                placeholder="请选择发送部门"
                style="width:100%"
                disabled
              >
                <el-option
                  v-for="item in tableContent.objects"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          justify="center"
          v-for="(item,index) in tableContent.fourItems"
          :key="index"
          class="newly-add"
          style="margin-bottom: 16px"
        >
          <!-- <el-col style="width: 55px ; height: 44px;">
            <div v-if="item.type===3" style="line-height: 44px;">
              <el-radio
                v-model="item.state"
                :label="1"
                disabled
              >是</el-radio>
              <el-radio
                v-model="item.state"
                :label="2"
                disabled
              >否</el-radio>
            </div>
          </el-col> -->
          <el-col
            :lg="14"
            :md="24"
          >
            <el-form-item label=" ">
              <div
                v-if="item.type===3"
                class="image-border-wrap"
              >
                <i class="el-icon-plus"></i>
              </div>
              <el-col v-if="item.type===2">
                <el-form-item
                  v-if="item.type===2"
                  label-width="0"
                >
                  <el-input
                    placeholder="文本框"
                    disabled
                    v-model="item.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="item.type===1">
                <el-row>
                  <el-form-item
                    v-if="item.type===2"
                    label-width="0"
                  >
                    <el-input
                      placeholder="文本框"
                      disabled
                      v-model="item.name"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row :span="24">
                  <el-radio
                    v-model="item.value"
                    disabled
                    label="a"
                  >A</el-radio>
                  <el-radio
                    v-model="item.value"
                    disabled
                    label="b"
                  >B</el-radio>
                  <el-radio
                    v-model="item.value"
                    disabled
                    label="c"
                  >C</el-radio>
                  <el-radio
                    v-model="item.value"
                    disabled
                    label="d"
                  >D</el-radio>
                </el-row>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button @click="dialogContentVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="填写详情"
      :visible.sync="dialogDetailVisible"
      v-if="tableDetail.inspector"
    >
      <table class="detail-table">
        <tbody>
          <tr>
            <th>表格名称</th>
            <td>{{tableDetail.inspector.name}}</td>
          </tr>
          <tr>
            <th>状态</th>
            <td>{{statusList[tableDetail.estate]}}</td>
          </tr>
          <tr>
            <th>完成时间</th>
            <td>{{parseDate(tableDetail.writeTime)}}</td>
          </tr>
          <tr
            v-for="(item,index) in tableDetail.itemList"
            :key="index"
          >
            <th>{{item.name}}</th>
            <td v-if="item.type===1">{{item.value}}</td>
            <td v-if="item.type===2">{{item.value}}</td>
            <td v-if="item.type===3">
              <template v-if="item.value">
                <img
                  @click="zoomImage(img)"
                  v-for="(img,idx) in item.value.split(',')"
                  :src="server+'/'+img"
                  alt
                  :key="idx"
                  width="100px"
                  height="100px"
                  style="margin: 10px"
                >
              </template>
              <div
                v-else
                style="opacity: 0.6"
              >(未上传图片)</div>
            </td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
    <el-dialog :visible.sync="viewImage">
      <img
        :src="server+'/'+currentImage"
        alt
        width="100%"
      >
    </el-dialog>
    <el-dialog
      :title="'督查列表-'+tableStatus"
      :visible.sync="dialogViewVisible"
    >
      <el-main>
        <el-table
          :data="detailList"
          border
          stripe
          style="text-align:center;"
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          id="out-table"
        >
          <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
          <el-table-column
            prop="detailsId"
            label="编号"
            width="90"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="inspector.name"
            label="名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="surname"
            label="填写人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="writeTime"
            label="填写时间"
            :formatter="formateDate"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                class="edit-btn"
                @click="viewThreeDetail(scope.row.detailsId)"
              >
                <i></i>查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSelfSizeChange"
            @current-change="handleSelfCurrentChange"
            :current-page="listCurrent"
            :page-sizes="[10,15]"
            :page-size="selfLimit"
            layout="total, sizes, prev, pager, next"
            :total="listTotal"
            style="float:right"
          ></el-pagination>
        </div>
      </el-main>
    </el-dialog>
    <el-dialog :visible.sync="dialogListVisible">
      <el-form
        label-width="100px"
        ref="selfDetailForm"
        :model="searchPart"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="督查表名称：">
              <el-input v-model="searchPart.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            :offset="1"
          >
            <el-form-item label-width="20px">
              <el-button @click="findSuperviseTableList(searchPart.name)">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-main>
        <el-table
          :data="tableList"
          border
          stripe
          style="text-align:center;"
          :header-cell-style="getRowClass"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          id="out-table"
        >
          <el-table-column
            type="index"
            label="编号"
            width="90"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="tableName"
            label="名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="截止时间"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                class="edit-btn"
                @click="findSuperviseStructure(scope.row.inspectorId)"
              >
                <i></i>查看详情
              </el-button>
              <el-button
                class="edit-btn"
                type="danger"
                @click="updateStatus(scope.row.inspectorId)"
              >
                <i></i>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleListChange"
            @current-change="handleListCurrentChange"
            :current-page="tablelistCur"
            :page-sizes="[10,15]"
            :page-size="listLimit"
            layout="total, sizes, prev, pager, next"
            :total="tablelistTotal"
            style="float:right"
          ></el-pagination>
        </div>
      </el-main>
    </el-dialog>
  </el-container>
</template>

<script>
import { api } from "@/fetch/api";
import { exportExcel } from "@/utils/validate";
import server from "@/config.js";
export default {
  name: "supervise",
  data() {
    return {
      server: server.apiServer,
      search: {
        name: ""
      },
      alldeparts: [],
      searchPart: {
        name: ""
      },
      pickerOption: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      currentPage: 1,
      tableContent: {},
      statusList: ["", "未完成", "已完成", "通过", "未通过"],
      addOptions: [
        {
          value: 2,
          label: "文本框"
        },
        {
          value: 1,
          label: "文本框+单选框"
        },
        {
          value: 3,
          label: "图片添加"
        }
      ],
      newlyValue: "",
      newlyValueConfig: [],
      superviseList: [],
      tableStatus: '',
      total: 0,
      limit: 10,
      objectTypes: {
        bigArmy: "大队",
        centreArmy: "中队",
        moleculeArmy: "支队",
        subjectRoom: "科室"
      },
      superviseForm: {
        fourItems: [],
        // inspectorId: 0,
        name: "",
        objectId: [],
        startTime: ""
      },
      departmentName: "",
      sendObject: [],
      selection: [],
      dialogSuperviseVisible: false,
      dialogViewVisible: false,
      dialogDetailVisible: false,
      dialogContentVisible: false,
      dialogListVisible: false,
      detailList: [],
      tableDetail: {},
      selectedType: "",
      listCurrent: 1,
      listTotal: 0,
      listParams: {
        estate: 0,
        departmentId: "",
        username: ""
      },
      tableList: [],
      tablelistCur: 1,
      tablelistTotal: 0,
      listLimit: 10,
      selfLimit: 10,
      currentImage: "",
      viewImage: false
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    zoomImage(img) {
      this.currentImage = img;
      this.viewImage = true;
    },
    handleListChange(val) {
      this.listLimit = val;
      this.findSuperviseTableList("");
    },
    handleListCurrentChange(val) {
      this.tablelistCur = val;
      this.findSuperviseTableList("");
    },
    handleSelfCurrentChange(val) {
      this.listCurrent = val;
      this.findSuperviseList(this.listParams);
    },
    handleSelfSizeChange(val) {
      this.selfLimit = val;
      this.findSuperviseList(this.listParams);
    },
    handleSizeChange(val) {
      this.limit = val;
      this.findSupervise("", this.limit, this.currentPage);
    },
    formateDate(row, col, value, index) {
      const date = new Date(value).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric"
      });
      return date;
    },
    getPermission() {
      api
        .PermissionPage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            this.permissions = response.result.list;
            api.LocalStorageService.update("permissions", response.result.list);
          } else {
          }
        })
        .catch(error => { });
    },
    cellClick(row, col, val, event) {
      if (col.property === "done") {
        this.tableStatus = '已完成'
        this.listParams = {
          estate: 2,
          username: "",
          departmentId: row.departmentId
        };
        this.findSuperviseList(this.listParams);
      }
      // if (col.property === 'nodone') {
      //     this.listParams = {
      //         estate: 1,
      //         username: '',
      //         departmentId: row.departmentId
      //     }
      //     this.findSuperviseList(this.listParams)
      // }
      if (col.property === "novia") {
        this.tableStatus = '未通过'
        this.listParams = {
          estate: 4,
          username: "",
          departmentId: row.departmentId
        };
        this.findSuperviseList(this.listParams);
      }
      // if (col.property === 'tote') {
      //     this.listParams = {
      //         estate: 0,
      //         username: '',
      //         departmentId: row.departmentId
      //     }
      //     this.findSuperviseList(this.listParams)
      // }
    },
    handleExport() {
      const data = [];
      this.selection.forEach(item => {
        const temp = {};
        temp.name = item.section;
        temp.fulfil = item.done;
        temp.noFulfil = item.nodone;
        temp.score = item.grade;
        temp.tote = item.tote;
        temp.noVia = item.novia;
        data.push(temp);
      });
      api.exportData("/exportExcel/exportFourExcel", data).then(response => {
        const date = new Date(Date.now()).toLocaleDateString();
        exportExcel(response.data, "督查四必" + date);
      });
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:rgba(242,242,242,1)";
      } else {
        return "";
      }
    },
    addNewValue() {
      const item = {
        fourItmeId: 0,
        fourTableId: 0,
        name: "",
        state: 0,
        type: this.newlyValue,
        value: ""
      };
      if (this.newlyValue === 1) {
        item.value = "b";
      } else {
        item.state = 1;
      }
      this.superviseForm.fourItems.push(item);
      this.newlyValueConfig.push(item);
    },
    deleteCurrent(index) {
      const temp = this.newlyValueConfig.filter((value, idx) => index !== idx);
      this.newlyValueConfig = [...temp];
      this.superviseForm.fourItems = [...temp];
    },
    setSuperviseForm() {
      this.findAllDepartment()
      this.superviseForm = {
        fourItems: [],
        // inspectorId: 0,
        name: "",
        objectId: [],
        startTime: ""
      };
      this.selectedType = "";
      this.superviseReceiever();
      this.clearConfig();
      this.dialogSuperviseVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].resetFields();
      });
    },
    clearConfig() {
      this.newlyValue = "";
      this.newlyValueConfig = [];
    },
    findAllDepartment() {
      api.findDepartment(0, 0).then(res => {
        this.alldeparts = res.result.inspectorList
      })
    },
    saveSuperviseData(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const values = { ...this.superviseForm };
          console.log(values, this.superviseForm);
          values.fourItems = this.newlyValueConfig;
          values.objectId = values.objectId.join(",");
          api.addSupervise(values).then(response => {
            if (response.status === 100) {
              this.$message("设置成功");
              this.findSupervise("", this.limit, this.currentPage);
              this.dialogSuperviseVisible = false;
            }
          });
        }
      });
    },
    findSupervise(name, pageSize, currentPage) {
      api.findSupervise(name, pageSize, currentPage).then(response => {
        if (response.status === 100) {
          this.superviseList = response.result.inspectorList;
          this.total = response.result.totalCount;
        }
      });
    },
    toArray(obj) {
      const temp = [];
      Object.keys(obj).map(item => {
        const child = obj[item];
        const temp2 = [];
        Object.keys(child).map(item => {
          temp2.push({
            value: item,
            label: child[item]
          });
        });
        temp.push({
          label: item,
          value: temp2
        });
      });
      return temp;
    },
    superviseReceiever() {
      api.superviseReceiever().then(response => {
        if (response.status === 100) {
          const { result } = response;
          this.sendObject = this.toArray(result);
        }
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findSupervise("", this.limit, this.currentPage);
    },
    findSuperviseList(params) {
      api
        .findSuperviseList(params, this.selfLimit, this.listCurrent)
        .then(response => {
          this.detailList = response.result.inspectorList;
          this.dialogViewVisible = true;
          this.listTotal = response.result.totalCount;
        });
    },
    viewThreeDetail(id) {
      api.findSuperviseDetail(id).then(response => {
        this.tableDetail = response.result;
        this.dialogDetailVisible = true;
      });
    },
    parseDate(timestamp) {
      const date = new Date(timestamp).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "long",
        day: "numeric"
      });
      return date;
    },
    findSuperviseTableList(name) {
      api
        .findSuperviseTableList(name, this.listLimit, this.tablelistCur)
        .then(response => {
          this.tableList = response.result.inspectorList;
          this.tablelistTotal = response.result.totalCount;
          this.dialogListVisible = true;
        });
    },
    findSuperviseStructure(id) {
      api.findSuperviseStructure(id).then(response => {
        this.tableContent = response.result;
        this.dialogContentVisible = true;
      });
    },
    viewTableList() {
      this.findSuperviseTableList("");
    },
    getSelectedObject(type) {
      return type
        ? this.sendObject.find(item => item.label === type).value
        : [];
    },
    onTypeChange(val) {
      this.superviseForm.objectId = [];
    },
    updateStatus(id) {
      this.$confirm("确认删除表格？", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.updateSuperviseStatus(id).then(response => {
            if (response.status === 100) {
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.findSuperviseTableList("");
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    //修改-2018-2-6
    this.getPermission();
    this.findSupervise("", this.limit, this.currentPage);
  }
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/index.css");
.el-header {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  .el-input,
  .el-select,
  .el-date-picker {
    width: 100%;
  }
}
.el-main {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  padding: 0px;
  .contant_head {
    border-left: 3px solid #f7585d;
    background: #f9f9f9;
    height: 40px;
    span {
      line-height: 40px;
      font-size: 20px;
      padding-left: 10px;
      sub {
        font-size: 12px;
      }
    }
  }
}
</style>
<style>
.cell {
  text-align: center;
}

.newly-add {
  min-height: 53px;
  line-height: 53px;
}

.image-border-wrap {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border: 1px dashed #d9d9d9;
  text-align: center;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="stylus" module="$">
.role_setting_panel {
  :global {
    .el-form-item {
      display: block;
    }
  }
}

.role_warpper {
  :global {
    .el-dialog__header {
      background: rgba(242, 242, 242, 1);
      padding-bottom: 16px;
    }

    .el-dialog__title {
      font-weight: bold;
    }

    .el-form-item__label {
      float: none;
      display: inline-block;
      min-width: 120px;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #F7585D;
      border-color: #F7585D;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #F7585D;
    }

    .el-button--primary {
      color: #fff;
      background-color: #F7585D;
      border-color: #F7585D;
    }
  }
}
</style>
<style lang="scss" scoped>
.detail-table {
  border-collapse: collapse;
  width: 100%;
  th {
    width: 30%;
    border: 1px solid #927171;
    padding: 10px 16px;
    color: #000;
    background-color: #f2f2f2;
  }
  td {
    width: 70%;
    border: 1px solid #927171;
    padding: 10px 16px;
  }
}
</style>
<style>
#nodisable .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #606266;
}

#nodisable .el-radio__label {
  color: #606266;
}
</style>
